<template>
	<view class="button-box">
		<view @click.tap="clickBtn()" :class="['btn', type, size, incomplete ? '' : 'incomplete', disable ? 'disable' : '']">
			<view class="text"><slot>按钮</slot></view>
			<slot>按钮</slot>
		</view>
	</view>
</template>

<script>
/**
 * type	类型	string	primary / catch / default / empty / border / black	primary 
 * size	尺寸	string	xxl(整行) / xl / l / m / s / xs	m
 * round	圆角	boolean	—	false
 * circle	圆	boolean	—	false
 *
 * */
export default {
	name: 'mButton',
	data() {
		return {};
	},
	props: {
		type: {
			//设置按钮类型:
			type: String,
			validator: (value) => {
				return ['primary', 'catch', 'default', 'empty', 'border', 'black'].indexOf(value) !== -1;
			},
			default: 'primary'
		},
		size: {
			type: String,
			validator: (value) => {
				return ['xxl', 'xl', 'l', 'm', 's', 'xs'].indexOf(value) !== -1;
			},
			default: 'm'
		},
		round: {
			//设置圆角
			type: Boolean,
			default: false
		},
		// 是否可点击
		incomplete: {
			type: Boolean,
			default: true
		},
		// 是否禁用
		disable: {
			type: Boolean,
			default: false
		}
	},
	computed: {},
	methods: {
		clickBtn() {
			// if(!this.incomplete) return;
			this.$emit('clickBtn');
		}
	},
	mounted() {}
};
</script>

<style lang="scss" scoped>
.button-box{
	width: 100%;
	text-align: center;
}
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	min-width: max-content;
	white-space: nowrap;
	color: transparent;
	padding: $btn-padding;
	box-sizing: border-box;
	&::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: calc(100% - 1.3rpx * 2);
		height: calc(100% - 1.3rpx * 2);
		transform: translate(-50%,-50%);
	}
	.text {
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
// 颜色
.primary {
	color: $font-color-main-B;
	&::before {
		background: $primary-btn-bg;
	}
}
.catch {
	color: $font-color-main-B;
	&::before {
		background: $catch-btn-bg;
	}
}
.default {
	color: $font-color-main-A;
	&::before {
		background: $default-btn-bg;
	}
}
.border {
	color: $font-color-main-A;
	&::before {
		background: $empty-btn-bg;
		border: 1.3rpx solid $border-color;
	}
}
.empty{
	color: $empty-btn-color;
}

.black {
	color: $btn-text-color1;
	&::before{
		background-color: $btn-bg-color-main;
	}
}
// 尺寸
.xxl{
	width: 100%;
	height: $btn-xl-height;
	font-size: $btn-font-size;
	border-radius: $btn-r;
	&::before {
		border-radius: $btn-r;
	}
}
.xl {
	width: $btn-xl-width;
	height: $btn-xl-height;
	font-size: $btn-font-size;
	border-radius: $btn-r;
	&::before {
		border-radius: $btn-r;
	}
}
.l {
	width: $btn-l-width;
	height: $btn-l-height;
	font-size: $btn-font-size;
	border-radius: $btn-r;
	&::before {
		border-radius: $btn-r;
	}
}
.m {
	width: $btn-m-width;
	height: $btn-m-height;
	font-size: $btn-font-size;
	border-radius: $btn-r;
	&::before {
		border-radius: $btn-r;
	}
}
.s {
	width: $btn-s-width;
	height: $btn-s-height;
	font-size: $btn-font-size;
	border-radius: $btn-r;
	&::before {
		border-radius: $btn-r;
	}
}
.xs {
	min-width: $btn-xs-width;
	height: $btn-xs-height;
	font-size: $btn-font-size-xs;
	border-radius: $btn-xs;
	&::before {
		border-radius: $btn-xs;
	}
}

// 信息为完善
.incomplete {
	&::before {
		opacity: 0.5;
	}
}

// 禁用
.disable {
	&::before {
		opacity: 0.5;
	}
}
</style>
